<template>
  <div class="dashboard-container">
    <div class="app-container" v-loading="loading">
      <!-- card 卡片 -->
      <el-card class="tree-card">
        <!-- tabs 选项卡 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="firest">
            <div class="content">
              <!-- 顶部组织结构 -->
              <treetools :item="topTree" @addDepts="addDepts" />
              <hr />
              <el-tree :data="departs" :props="defaultProps" default-expand-all>
                <!-- <template slot-scope="{ data }"> -->
                <!-- 部门 -->
                <treetools
                  slot-scope="obj"
                  :item="obj.data"
                  @delDepts="getDepartments"
                  @addDepts="addDepts"
                  @editDepts="editDepts"
                />
                <!-- </template> -->
              </el-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 放置新增弹层组件  -->
    <add-dept
      ref="formData"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @refreshdata="getDepartments"
      :currentObj="currentObj"
    />
    <!--  @refreshdata="getDepartments" 重新获取数据 -->
  </div>
</template>

<script>
import treetools from "./components/tree-tools.vue";
import AddDept from "./components/add-dept.vue";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";

export default {
  components: {
    treetools,
    AddDept,
  },
  data() {
    return {
      loading: false, //显示加载动画
      showDialog: false, //显示窗体
      activeName: "firest",
      //顶部结构的数据源
      topTree: {
        name: "江苏传智播客",
        manager: "负责人",
        isTop: true, //控制 删除组织和查看组织是否
      },
      //设置数据源的结构
      defaultProps: {
        label: "name", // 表示 从这个属性显示内容
      },
      departs: [], //转后后的数组
      node: {},
      currentObj: {},
    };
  },
  created() {
    this.getDepartments(); //调用自身方法
  },
  methods: {
    //获取所有的组织结构数据
    async getDepartments() {
      this.loading = true;
      const res = await getDepartments();
      this.topTree = { ...res.depts[0], manager: "负责人" };
      this.departs = tranListToTreeData(res.depts, "");
      this.loading = false;
    },
    addDepts(node) {
      this.showDialog = true; //显示弹窗
      this.node = node;
    },
    editDepts(item) {
      this.showDialog = true;
      this.currentObj = item;
      this.$refs.formData.getDepartDetail(item.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-card {
  font-size: 14px;
  .content {
    padding: 20px 80px;
  }
}
</style>
